import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 防抖 节流
Vue.directive('lazy',{
  inserted(el,binding){
    //检测当前这个图片有没有到可视区，如果 到了可视区，就把v-lazy后面的值 赋值给src属性
    // timer一开始是null,
    // 500ms只做一次 节流
    // 这是一个闭包 
    // 闭包的应用场景:可以用于实现防抖 节流
    let timer = null;
    window.onscroll = function(){
      if(timer)return //第一次的时候这个代码是不执行的 所以执行下面的代码  setTimeout返回当前定时器id值 1 2 3 
      timer = setTimeout(()=>{
        console.log(123);
        if(el.offsetTop <= document.documentElement.clientHeight + document.documentElement.scrollTop){
          el.src = binding.value 
          window.onscroll = null 
        }
        timer = null 
      },500)
    }
  }
})

// 必须放在最后面最后面
new Vue({
  render: h => h(App),
}).$mount('#app')


